<template>
	<div class="box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, reactive, shallowRef, onMounted, onUnmounted, watchEffect,defineEmits } from "vue";
import { pxToRem } from "@/utils/index";

// 接收参数
const props = defineProps({
	housingSupplyStatsData: {
			type: Object,
			default: () => {},
	},
});
// 数据定义
const chartsData = reactive<any>({
	legendData: [],
	xAxisData: [],
	yAxisData: [],
	seriesData: [],
	typeData:[],
});
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");

const emit = defineEmits(['dialogData'])

// echarts初始化渲染
chartsData.legendData = props.housingSupplyStatsData.legendData;
chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
chartsData.seriesData = props.housingSupplyStatsData.seriesData;
chartsData.typeData = props.housingSupplyStatsData.typeData;
const colors = props.housingSupplyStatsData.colors;
const legendSty = props.housingSupplyStatsData.legendStyle;
const gridSty = props.housingSupplyStatsData.gridConfig;

const getEchart = () => {
	if (echartDom.value) {
			myChart.value = echarts.init(echartDom.value);
			// 提示框文字样式
			const tooltipTextStyle = {
					color: "#fff",
					fontSize: pxToRem(14),
			};

			// 提示框背景
			const tooltipBackgroundColor = "rgba(8, 64, 132, 0.9)";

			// 图例配置
			const legendStyle = {
					show: legendSty.show,
					icon: legendSty.icon,
					left: legendSty.right ? "auto" : pxToRem(legendSty.left),
					right: pxToRem(legendSty.right),
					top: pxToRem(legendSty.top),
					itemWidth: pxToRem(legendSty.itemWidth),
					itemHeight: pxToRem(legendSty.itemHeight),
					itemGap: pxToRem(legendSty.itemGap),
					// width: '70%',
					textStyle: {
							color: "#fff",
							fontSize: pxToRem(12),
							rich: {},
							padding: [0, 0, pxToRem(-3), 0],
					},
					data: chartsData.legendData,
			};

			// 网格区域
			const gridConfig = {
					left: gridSty.left,
					right: gridSty.right,
					bottom: gridSty.bottom,
					top: gridSty.top,
					containLabel: true,
			};

			// x轴配置
			const xAxisConfig = {
					boundaryGap: true,
					data: chartsData.xAxisData,
					axisTick: {
							show: false,
					},
					axisLabel: {
							textStyle: {
									color: "#FFFFFF",
									fontSize: pxToRem(12),
							},
					},
					
					axisLine:{
							lineStyle:{
									color: "#28FCFF",
							}
					}

			};

			// y轴配置
			const yAxisConfig = chartsData.yAxisData.map((item: any) => ({
					type: "value",
					name: item.name,
					nameTextStyle: {
							color: "#959699",
							fontSize: pxToRem(12),
					},
					splitLine: {
							show: item.type == 2 ? false : true,
							lineStyle: {
									color: "#31679C",
									type: "dashed",
							},
					},
					axisLabel: {
							formatter: "{value}",
							color: "#959699",
							fontSize: pxToRem(12),
					},
			}));
			// 数据项配置
			const seriesConfig = chartsData.seriesData.map((data: any, index: string | number) => ({
					name: chartsData.legendData[index],
					type:chartsData.typeData[index].name,

					data: data,
					barGap: 0,
					label: {
						show:true,
						rotate: 90,
						align: 'left',
						verticalAlign: 'middle',
						position: 'insideBottom',
						distance: pxToRem(10),
						formatter: '{c}  {name|{a}}',
						fontSize:  pxToRem(12),
						rich: {
								name: {}
						}
					},
					emphasis: {
							focus: 'series'
					},
					stack: chartsData.typeData[index].stack == 2 ? "account" : null,
					yAxisIndex: chartsData.typeData[index].type == 2 ? 1 : 0,
					areaStyle:
					chartsData.typeData[index].areaStyleType == 2
									? {
													color: {
															type: "linear",
															x: 0,
															y: 0,
															x2: 0,
															y2: 1,
															colorStops: [
																	{
																			offset: 0,
																			color: colors[index].a, // 0% 处的颜色
																	},
																	{
																			offset: 1,
																			color: colors[index].b, // 100% 处的颜色
																	},
															],
													},
											}
									: null,
					itemStyle: {
							color: {
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									type: "linear",
									global: false,
									colorStops: [
											{
													offset: 0,
													color: colors[index].a,
											},
											{
													offset: 1,
													color: colors[index].b,
											},
									],
							},
					},
			}));
			// 渲染图表数据
			const option = {
					tooltip: {
							trigger: "axis",
							axisPointer: {
									type: "line",
							},
							position: function (point, params, dom, rect, size) {
											return [point[1], '10%']; // 示例：将 tooltip 定位在鼠标的水平位置和视窗顶部 10% 的位置
							},
							textStyle: tooltipTextStyle,
							backgroundColor: tooltipBackgroundColor,
					},
					legend: legendStyle,
					grid: gridConfig,
					xAxis: xAxisConfig,
					yAxis: yAxisConfig,
					series: seriesConfig,
					dataZoom: chartsData.xAxisData[0].includes('-')?[
							{
									type: 'inside',
									start: 0,
									end: 10
							},
							{
									start: 0,
									end: 10,
									height:pxToRem(20),
									bottom: pxToRem(13),
							}
					]:''
			};
			myChart.value.setOption(option);
			myChart.value.getZr().on("click", (params) => {
					emit('dialogData',option)
			});
	}
};
const updateChart = () => {
	if (myChart.value) {
			myChart.value.dispose(); // 销毁旧图表实例
	}
	chartsData.legendData = props.housingSupplyStatsData.legendData;
	chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
	chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
	chartsData.seriesData = props.housingSupplyStatsData.seriesData;
	chartsData.typeData = props.housingSupplyStatsData.typeData;
	getEchart();
	
};

watchEffect(() => {
	updateChart();
});

onMounted(() => {
	getEchart();
	window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
	window.removeEventListener("resize", updateChart);
});
</script>
